<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jOuery下滑菜单--jQuery分享</title>
<link rel="stylesheet" href="style.css" />
<style>
.menu { height: 45px; display: block; }
.menu ul { list-style: none; padding: 0; margin: 0; }
.menu ul li { float: left; /* 菜单子元素的内容超出不可见 */  
			overflow: hidden; position: relative; text-align: center; line-height: 45px; }
.menu ul li a { /* 必须是相对定位  */ 
			position: relative; display: block; width: 110px; height: 45px; font-family: Arial; font-size: 11px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.menu ul li a span { /* 所有层将使用绝对定位 */
			position: absolute; left: 0; width: 110px; }
.menu ul li a span.out { top: 0px; }
.menu ul li a span.over,  .menu ul li a span.bg { /* 起初.over层和.bg层相对a元素-45px以达到隐藏 */  
			top: -45px; }
/** 完整版示例 **/

		#menu { background:url(bg_menu.gif) scroll 0 -1px repeat-x; border:1px solid #CCC; }
#menu ul li a { color: #000; }
#menu ul li a span.over { color: #FFF; }
#menu ul li span.bg { height: 45px; background: url(bg_over.gif) center center no-repeat; }
/** 简化版示例 **/
		
		#menu2 { background:#45A8DF; }
#menu2 ul li a { color:#FFF; }
#menu2 ul li a span.over { background: #A6DD00; color:#333; }
#menu2 ul li.nav1 a span.over { background: #fea274; }
#menu2 ul li.nav2 a span.over { background: #b0bbba; }
#menu2 ul li.nav3 a span.over { background: #a3f091; }
#menu2 ul li.nav4 a span.over { background: #86dbf9; }
#menu2 ul li.nav5 a span.over { background: #e0caf0; }
#menu2 ul li.nav6 a span.over { background: #9dace9; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script language="javascript">
		$(document).ready(function() {
			
			/* 	完整版示例	*/

			// 把每个a中的内容包含到一个层（span.out）中，在span.out层后面追加背景图层（span.bg）
			$("#menu li a").wrapInner( '<span class="out"></span>' ).append( '<span class="bg"></span>' );

			// 循环为菜单的a每个添加一个层（span.over）
			$("#menu li a").each(function() {
				$( '<span class="over">' +  $(this).text() + '</span>' ).appendTo( this );
			});

			$("#menu li a").hover(function() {
				// 鼠标经过时候被触发的函数
				$(".out",this).stop().animate({'top':'45px'},250); // 向下滑动 - 隐藏
				$(".over",this).stop().animate({'top':'0px'},250); // 向下滑动 - 显示
				$(".bg",this).stop().animate({'top':'0px'},	120); // 向下滑动 - 显示

			}, function() {
				// 鼠标移出时候被触发的函数
				$(".out",this).stop().animate({'top':'0px'},250); // 向上滑动 - 显示
				$(".over",this).stop().animate({'top':'-45px'},250); // 向上滑动 - 隐藏
				$(".bg",this).stop().animate({'top':'-45px'},120); // 向上滑动 - 隐藏
			});
					

			/*	简化版示例	*/
					
			$("#menu2 li a").wrapInner( '<span class="out"></span>' );
			
			$("#menu2 li a").each(function() {
				$('<span class="over">' +  $(this).text() + '</span>' ).appendTo( this );
			});

			$("#menu2 li a").hover(function() {
				$(".out",this).stop().animate({'top':'45px'},200); // 向下滑动 - 隐藏
				$(".over",this).stop().animate({'top':'0px'},200); // 向下滑动 - 显示

			}, function() {
				$(".out",this).stop().animate({'top':'0px'},200); // 向上滑动 - 显示
				$(".over",this).stop().animate({'top':'-45px'},200); // 向上滑动 - 隐藏
			});

		});

	</script>
</head>
<body>
<div id="content">
  <h1>jOuery动态下滑菜单</h1>
  <p>这是一个演示页面，您可以点击 <a href="http://www.cnblogs.com/wiky/articles/animated-menu-0415.html">查看原文</a></p>
  <hr />
  <p>完整版（背景图）示例</p>
  <br/>
  <div id="menu" class="menu">
    <ul>
      <li><a href="javascript:;">Home</a></li>
      <li><a href="javascript:;">HTML/CSS</a></li>
      <li><a href="javascript:;">JavaScript</a></li>
      <li><a href="javascript:;">Resources</a></li>
      <li><a href="javascript:;">Tutorials</a></li>
      <li><a href="javascript:;">About</a></li>
    </ul>
  </div>
  <p>&nbsp;</p>
  <p>简化版（无图片）示例</p>
  <br/>
  <div id="menu2" class="menu">
    <ul>
      <li class="nav1"><a href="javascript:;">Home</a></li>
      <li class="nav2"><a href="javascript:;">HTML/CSS</a></li>
      <li class="nav3"><a href="javascript:;">JavaScript</a></li>
      <li class="nav4"><a href="javascript:;">Resources</a></li>
      <li class="nav5"><a href="javascript:;">Tutorials</a></li>
      <li class="nav6"><a href="javascript:;">About</a></li>
    </ul>
  </div>
</div>

</body>
</html>